<script setup lang="tsx">
import type { IState } from './type'
// import { vPermission } from '@apps/_share/directives/permission'
import { ButtonOperationType } from '@apps/_share/enums'
import useMicroStore from '@apps/_share/store/micro'
import { RouteName } from '@auth/enums'
import DetailDrawer from './components/detail-drawer.vue'
import {
  columns,
  schemas,
} from './config'

defineOptions({ name: RouteName.appAdmin })

const state = reactive<IState>({
  detailDrawerVisible: false,
  query: {
    test: '测试数据',
    status: ['1', '2'],
  },
  schemas,
  tableData: [
    {
      id: '1',
      projectName: '商户端',
      projectCode: '1111-abc-1111-abc-111',
      domains: [
        {
          env: 'dev',
          envName: '开发环境',
          url: 'http://localhost:6060',
        },
        {
          env: 'test',
          envName: '测试环境',
          url: 'http://localhost:6060',
        },
        {
          env: 'release',
          envName: '预发环境',
          url: 'http://localhost:6060',
        },
        {
          env: 'master',
          envName: '生产环境',
          url: 'http://localhost:6060',
        },
      ],
      typeName: '-',
      status: 1,
      statusName: '开启',
      createName: '五老星1号',
      createTime: '2024-10-24 12:00:00',
      modifyName: '五老星2号',
      modifyTime: '2024-10-25 10:10:20',
      apps: [{
        id: 1,
        name: '权限中心',
        code: 'auth',
      }, {
        id: 2,
        name: '配置中心',
        code: 'config',
      }, {
        id: 3,
        name: '翻译中心',
        code: 'translate',
      }],
    },
    {
      id: '2',
      projectName: '工厂端',
      projectCode: '222-abc-2222-abc-2222',
      domains: [
        {
          env: 'dev',
          envName: '开发环境',
          url: 'http://localhost:6060',
        },
        {
          env: 'test',
          envName: '测试环境',
          url: 'http://localhost:6060',
        },
        {
          env: 'release',
          envName: '预发环境',
          url: 'http://localhost:6060',
        },
        {
          env: 'master',
          envName: '生产环境',
          url: 'http://localhost:6060',
        },
      ],
      typeName: '-',
      statusName: '开启',
      createName: '五老星1号',
      createTime: '2024-10-24 12:00:00',
      modifyName: '五老星2号',
      modifyTime: '2024-10-25 10:10:20',
      apps: [],
    },
    {
      id: '3',
      projectName: '运营端',
      projectCode: '333-abc-3333-abc-3333',
      domains: [
        {
          env: 'dev',
          envName: '开发环境',
          url: 'http://localhost:6060',
        },
        {
          env: 'test',
          envName: '测试环境',
          url: 'http://localhost:6060',
        },
        {
          env: 'release',
          envName: '预发环境',
          url: 'http://localhost:6060',
        },
        {
          env: 'master',
          envName: '生产环境',
          url: 'http://localhost:6060',
        },
      ],
      typeName: '-',
      statusName: '开启',
      createName: '五老星1号',
      createTime: '2024-10-24 12:00:00',
      modifyName: '五老星2号',
      modifyTime: '2024-10-25 10:10:20',
      apps: [
        {
          id: 1,
          name: '权限中心',
          code: 'auth',
        },
        {
          id: 2,
          name: '配置中心',
          code: 'config',
        },
        {
          id: 3,
          name: '翻译中心',
          code: 'translate',
        },
      ],
    },
    // {
    //   id: '4',
    //   projectName: '采购端',
    //   projectCode: '4444-abc-444-abc-4444',
    //   domains: [
    //     {
    //       env: 'dev',
    //       envName: '开发环境',
    //       url: 'http://localhost:6060',
    //     },
    //     {
    //       env: 'test',
    //       envName: '测试环境',
    //       url: 'http://localhost:6060',
    //     },
    //     {
    //       env: 'release',
    //       envName: '预发环境',
    //       url: 'http://localhost:6060',
    //     },
    //     {
    //       env: 'master',
    //       envName: '生产环境',
    //       url: 'http://localhost:6060',
    //     },
    //   ],
    //   typeName: '-',
    //   statusName: '开启',
    //   createName: '五老星1号',
    //   createTime: '2024-10-24 12:00:00',
    //   modifyName: '五老星2号',
    //   modifyTime: '2024-10-25 10:10:20',
    //   apps: [],
    // },
  ],
  currentRow: null,
  pagination: {
    page: 1,
    size: 20,
    total: 0,
  },
})

const { $t } = useMicroStore()

function onSearch(model: any) {
  console.log({ model })
}

function onReset(model: any) {
  console.log({ model })
}

function onAdd() {
  console.log(111111)
}

function onEdit(type: ButtonOperationType, row: any) {
  state.currentRow = row
  state.detailDrawerVisible = true
}
</script>

<template>
  <UiPageListContainer>
    <template #search>
      <UiFormSearch
        v-model:query="state.query"
        :schemas="state.schemas"
        @reset="onReset"
        @search="onSearch"
      />
    </template>

    <template #operation>
      <ElSpace wrap>
        <ElButton
          v-permission="'auth__project'"
          v-copy="'123456789'"
          v-ripple
          type="primary"
          @click="onAdd"
        >
          {{ $t('新增') }}
        </ElButton>
      </ElSpace>
    </template>

    <template #table>
      <BaseTable
        row-key-prop="id"
        :columns="columns"
        :data="state.tableData"
      >
        <template #domains="{ row }">
          <div
            v-for="domain in row.domains"
            :key="domain.env"
          >
            <span>{{ domain.envName }}: </span>
            <span>{{ domain.url }}</span>
          </div>
        </template>

        <template #operation="{ row }">
          <ElSpace
            wrap
            :size="16"
            class="pt-8px pb-8px"
          >
            <ElButton
              link
              type="primary"
              size="small"
              @click="onEdit(ButtonOperationType.DETAIL, row)"
            >
              {{ $t('详情') }}
            </ElButton>

            <ElButton
              link
              type="primary"
              size="small"
              @click="onEdit(ButtonOperationType.EDIT, row)"
            >
              {{ $t('编辑') }}
            </ElButton>

            <ElButton
              link
              type="primary"
              size="small"
            >
              {{ $t('删除') }}
            </ElButton>
          </ElSpace>
        </template>
      </BaseTable>
    </template>

    <template #pagination>
      <BasePagination
        v-if="state.pagination.total > 0"
        v-model:page="state.pagination.page"
        v-model:size="state.pagination.size"
        :total="state.pagination.total"
      />
    </template>
  </UiPageListContainer>

  <DetailDrawer
    v-model:visible="state.detailDrawerVisible"
    v-model:item="state.currentRow"
  />
</template>
